<template>
  <el-carousel :height="height + 'px'" arrow="never" autoplay>
    <el-carousel-item v-for="item in bannerList" :key="item.id">
      <router-link :to="item.linkUrl">
        <img :src="item.imageUrl" />
      </router-link>
    </el-carousel-item>
  </el-carousel>
</template>
<script setup lang="ts">
import { reqGetBannerList } from '@/api'
import { queryBannerParams, respBannerData } from '@/api/types'
import { onMounted, ref } from 'vue'

const props = defineProps<{
  height: string
  position: number
}>()

const bannerList = ref<respBannerData[]>([])
onMounted(async () => {
  let list = await getBannerList()
  bannerList.value = list
})

const getBannerList = async () => {
  const reqParams: queryBannerParams = {
    pageNo: 1,
    pageSize: 10,
    position: props.position,
  }
  let list = await reqGetBannerList(reqParams)
  return list.data?.list
}
</script>
<style lang="scss" scoped>
img,
a {
  display: inline-block;
  width: 100%;
  min-width: 1300px;
  height: 100%;
}
</style>
